<template>
  <div id="contsainer"></div>
</template>
<script>
export default {
  data() {
    return {
      viewer: null
    }
  },
  mounted() {
    this.initCesium()
    this.addCylinderOutlineGeometry(this.viewer)
  },
  methods: {
    initCesium() {
      this.viewer = new Cesium.Viewer('contsainer', {
        animation: false,
        baseLayerPicker: false,
        fullscreenButton: false,
        geocoder: false,
        homeButton: false,
        infoBox: false,
        sceneModePicker: false,
        navigationHelpButton: false,
        scene3DOnly: true,
        timeline: false,
        selectionIndicator: false, //是否显示选取指示器组件
        shouldAnimate: false, //自动播放动画控件
        shadows: true, //是否显示光照投射的阴影
        terrainShadows: Cesium.ShadowMode.RECEIVE_ONLY, //地质接收阴影
        sceneMode: Cesium.SceneMode.SCENE3D
      })
      this.viewer._cesiumWidget._creditContainer.style.display = 'none' //	去除版权信息
    },
    addCylinderOutlineGeometry(viewer) {
      // create cylinder geometry 怎么增加他的分段数量
      let cylinder1 = new Cesium.CylinderOutlineGeometry({
        length: 200000,
        topRadius: 80000,
        bottomRadius: 200000
      })
      let geometry1 = Cesium.CylinderOutlineGeometry.createGeometry(cylinder1)

      let cylinderInstance1 = new Cesium.GeometryInstance({
        geometry: geometry1,
        modelMatrix: Cesium.Matrix4.multiplyByTranslation(
          Cesium.Transforms.eastNorthUpToFixedFrame(Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883)),
          new Cesium.Cartesian3(0.0, 0.0, 100.0),
          new Cesium.Matrix4()
        ),
        attributes: {
          color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.BLUE)
        },
        id: 'cylinderInstance1'
      })

      let cylinder2 = new Cesium.CylinderOutlineGeometry({
        length: 800000,
        topRadius: 500000,
        bottomRadius: 500000
      })
      let geometry2 = Cesium.CylinderOutlineGeometry.createGeometry(cylinder2)

      let cylinderInstance2 = new Cesium.GeometryInstance({
        geometry: geometry2,
        modelMatrix: Cesium.Matrix4.multiplyByTranslation(
          Cesium.Transforms.eastNorthUpToFixedFrame(Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883)),
          new Cesium.Cartesian3(0.0, 0.0, 1000000.0),
          new Cesium.Matrix4()
        ),
        attributes: {
          color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.RED)
        },
        id: 'cylinderInstance2'
      })

      let primitive = new Cesium.Primitive({
        geometryInstances: [cylinderInstance1, cylinderInstance2],
        asynchronous: false, //是否采用多线程
        appearance: new Cesium.PerInstanceColorAppearance({
          translucent: false, //半透明
          flat: true //当 true 时，片段着色器中将使用平面阴影，这意味着不考虑光照
        })
      })

      viewer.scene.primitives.add(primitive)
    }
  }
}
</script>
<style scoped>
#contsainer {
  height: 100%;
  width: 100%;
  background-color: red;
}
</style>
